<template>
    <div class="top">
        <img src='@/assets/W.png' style="width:40px;position: absolute;top:10px;left:150px;">
        <div class="daoHang"
            style="display: flex;justify-content: space-between;height:100%;position:absolute;left:15%;">
            <div>
                <label class="el-dropdown-link" @click="ToHome">首页</label>
            </div>
            <div>
                <label class="el-dropdown-link" @click="ToKe">相关科普</label>
            </div>
            <!-- <div>
                <label class="el-dropdown-link" @click="ToShuJu">数据</label>
            </div> -->
            <div id="outer1">
                <label class="el-dropdown-link">APP识别分析
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </label>
                <div id="inner1" class="selectBox" style="height:150px;">
                    <div class="select" @click="ToDetection1">网址识别</div>
                    <div class="select" @click="ToDetection2">二维码识别</div>
                    <div class="select" @click="ToDetection3">本地上传识别</div>
                </div>
            </div>
            <div>
                <label class="el-dropdown-link" @click="ToHeiBai">黑白名单库</label>
            </div>
            <div>
                <label class="el-dropdown-link" @click="ToPersonalHome">历史数据</label>
            </div>
            <div>
                <label class="el-dropdown-link" @click="ToChat">AI问答</label>
            </div>
            <!-- <div>
                <label class="el-dropdown-link">
                    Dropdown List
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </label>
            </div> -->
            <div id="outer2">
                <el-avatar :size="60" src="" class="top-head">
                    <img :src="head" />
                </el-avatar>
                <div id="inner2" class="selectBox"
                    style="height:150px;position: relative;left:-40px;top:0px;box-shadow: 0 0px 35px rgba(0, 50, 200, 0.3);">
                    <div class="select" style="width:130px;" @click="ToPersonalHome">{{ name }}</div>
                    <div class="select" @click="ToPersonalHome">个人主页</div>
                    <div class="select" @click="LogOut">退出登录</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, defineEmits,computed } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import { useStore } from 'vuex'
const store = useStore();
const head = computed(() => store.state.UserInformation.Head);
const name = computed(() => store.state.UserInformation.Name);

const emit = defineEmits(['ToKePu','ToShuJu']);
function LogOut() {
    sessionStorage.clear();
    router.replace('/');
}
function ToPersonalHome() {
    router.replace('/Main');
}
function ToHome(){
    if(router.currentRoute.value.path!=='/Home'){
    router.replace('/Home');
    }
    router.replace('/Home')
}
function ToKe(){
    if(router.currentRoute.value.path!=='/Home'){
    router.replace('/Home');
    }
    emit('ToKePu');
}
function ToShuJu(){
    if(router.currentRoute.value.path!=='/Home'){
    router.replace('/Home');
    }
    emit('ToShuJu');
}
function ToDetection1(){
    if(router.currentRoute.value.path!=='/Main/Detection1'){
        router.replace('/Main/Detection1');
    }
}
function ToDetection2(){
    if(router.currentRoute.value.path!=='/Main/Detection2'){
        router.replace('/Main/Detection2')
    }
}
function ToDetection3(){
    if(router.currentRoute.value.path!=='/Main/Detection3'){
        router.replace('/Main/Detection3')
    }
}
function ToHeiBai(){
    if(router.currentRoute.value.path!=='/Main/HeiBai'){
        router.replace('/Main/HeiBai')
    }
}
function ToChat(){
    if(router.currentRoute.value.path!=='/Main/Chat'){
        router.replace('/Main/Chat')
    }
}
</script>
<style scoped>
.selectBox {
    position: relative;
    width: 130px;
    top: 30px;
    left: -10px;
    border-radius: 5px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.65);
    box-shadow: 0 0px 35px rgba(0, 50, 230, 0.6);
    color: rgb(221, 221, 221);
    display: none;
}

#outer1 {
    position: relative;
}

#outer1:hover #inner1 {
    display: block;
}

#outer2 {
    position: absolute;
    /* left: 145%; */
    left:155%;
    top: 12px;
}

#outer2:hover #inner2 {
    display: block;
}

.select {
    height: 50px;
    font-family: 黑体;
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select:hover {
    background-color: rgba(103, 98, 236, 0.65);
    color: white;
}

.top {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    box-shadow: 0 0px 35px rgba(0, 0, 0, 0.6);
}

.el-dropdown-link {
    z-index: 20;
    color: rgb(191, 191, 191);
    font-size: 18px;
    height: 100%;
    margin-right: 40px;
    position: relative;
    top: 20px;
}

.el-icon--right {
    position: relative;
    top: 3px;
    width: 15px;
    left: -4px;
    transition: transform 0.3s ease;
}

.el-dropdown-link:hover {
    color: white;
}

.el-dropdown-link:hover .el-icon--right {
    transform: rotate(-180deg);
    /* 悬停时旋转180度 */
}

.top-head {
    width: 40px;
    height: 40px;
    border-radius: 20px;
}
</style>